<template>
  <div class="white">
    <div class="left_nb_body">
      <div class="title">
        <span>
          <svg-icon v-if="content" icon-class="dzh" class="svg-icon"></svg-icon>
          <svg-icon v-else icon-class="Frame" class="svg-icon"></svg-icon>

       
        </span>
         {{ content?content.title:'自助直播' }}
      </div>
      <p class="content">
        {{ content? content.content:'自助直播为预约审核机制，审核通过后，开启会议直播'}}
      </p>
      <div style="position: relative; z-index: 2">
        <div class="left_tp1">
          <h6>Stop 1</h6>
          <div class="tp1_content">
            <svg-icon icon-class="tp1" class="svg-icon2"></svg-icon>
            <div style="padding-right: 10px;">
              <h4>创建会议</h4>
              <span >填写会议名称、选择会议时间等会议信息</span>
            </div>
          </div>
        </div>
        <div class="success">
          <span class="sc_tg_parent" v-if="setpData.stepExamineOneStatus!=1"><span class="sc_tg"><span></span></span></span> 
          <span class="sc_tg_parent2" v-if="setpData.stepExamineOneStatus==1"><span></span></span> 
          <span>预约审核</span>
          <span class="sc_zt" v-if="setpData.stepExamineOneStatus==3">审核已驳回</span>
          <span class="sc_tgs" v-if="setpData.stepExamineOneStatus==4">审核已通过 </span>
          <img src="@/assets/img/Vectorl.png" v-if="setpData.stepExamineOneStatus==4" class="success_shu">
          <img src="@/assets/img/Vectorh.png" v-if="setpData.stepExamineOneStatus==1" class="success_shu">
          <img src="@/assets/img/Group2.png" v-if="setpData.stepExamineOneStatus==2||setpData.stepExamineOneStatus==3" class="success_shu">
        </div>
        <div class="left_tp1">
          <h6>Stop 2</h6>
          <div class="tp1_content">
            <svg-icon v-if="setpData.step>1" icon-class="tp1" class="svg-icon2"></svg-icon>
            <div>
              <h4>直播管理</h4>
              <span>进入直播页面，审核用户，开启直播</span>
            </div>
          </div>
        </div>
        <div class="success">
          <span class="sc_tg_parent" v-if="setpData.stepExaminetwoStatus!=1"><span class="sc_tg"><span></span></span></span> 
          <span class="sc_tg_parent2" v-if="setpData.stepExaminetwoStatus==1"><span></span></span> 
          <span>会议结束</span>
          <!-- <span v-if="setpData.stepExaminetwoStatus==2" class="col7e8 fs12" style="padding-left: 5px;">审核中</span>
          <span class="sc_zt" v-if="setpData.stepExaminetwoStatus==3">审核已驳回</span>
          <span class="sc_tgs" v-if="setpData.stepExaminetwoStatus==4">审核已通过 </span> -->
          <img src="@/assets/img/Vectorl.png" v-if="setpData.stepExaminetwoStatus==4" class="success_shu">
          <img src="@/assets/img/Vectorh.png" v-if="setpData.stepExaminetwoStatus==1" class="success_shu">
          <img src="@/assets/img/Group2.png" v-if="setpData.stepExaminetwoStatus==2||setpData.stepExaminetwoStatus==3" class="success_shu">
        </div>
        <div class="left_tp1">
          <h6>Stop 3</h6>
          <div class="tp1_content">
            <svg-icon v-if="setpData.step>2" icon-class="tp1" class="svg-icon2"></svg-icon>
            <div>
              <h4>会后管理</h4>
              <span>下载会议视频，获取会后数据报告</span>
            </div>
          </div>
        </div>
      </div>
      <img src="@/assets/img/w_1.png" class="btm_img" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  props:{
    //.step:进行的步骤  .stepExamineOneStatus 赞助审核的状态 1 立即赞助 2 审核中 3审核已驳回 4审核通过
    //.stepExaminetwoStatus  报告审核的状态 1 填写报告 2 审核中 3审核已驳回 4审核通过
    setpData:Object,
    content:Object
  }
};
</script>

<style lang="scss" scoped>

@media only screen  and (max-width:1599px)  {
  .white {
    background: #fff;
    min-width: 295px;
    width: 295px;
    height: calc(100vh - 105px);
    border-radius: 4px;
    min-height: 555px;
    padding: 10px;
    .left_nb_body {
      background: linear-gradient(231deg, #dbe4f5 0%, #fbfcfe 100%);
      border-radius: 4px;
      height: calc(100% - 25px);
      padding: 10px 10px;
      position: relative;
    }
    .title {
      @include flex(row, center, flex-start);
      font-size: 16px;
      font-weight: 600;
      color: #4f5862;
      line-height: 19px;
      margin-bottom: 10px;
      .svg-icon {
        font-size: 20px;
        padding: 7px;
        background: #0c7ff2;
        border-radius: 6px 6px 6px 6px;
        display: inline-block;
        margin-right: 10px;
        color: #fff;
      }
    }
    .content {
      font-size: 13px;
      color: #4f5862;
      line-height: 24px;
      margin-bottom: 10px;
    }
    .btm_img {
      display: inline-block;
      width: 126px;
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 1;
    }
    .left_tp1 {
      padding: 12px 0 12px 15px;
      background: rgba(255, 255, 255, 0.79);
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #cee5fc;
      position: relative;
      z-index: 3;
      h6 {
        font-size: 12px;
        color: #7e8790;
        line-height: 20px;
        margin-bottom: 10px;
      }
      .tp1_content {
        @include flex(row, center, flex-start);
        .svg-icon2 {
          font-size: 22px;
          display: inline-block;
          margin-right: 9px;
        }
        h4 {
          font-size: 14px;
          font-weight: 600;
          color: #4f5862;
          line-height: 16px;
          margin-bottom: 5px;
        }
        span {
          font-size: 12px;
          color: #7e8790;
          line-height: 14px;
        }
      }
    }
    .success {
      @include flex(row, center, flex-start);
      padding: 20px 9px;
      font-size: 14px;
      font-weight: 600;
      color: #4f5862;
      line-height: 16px;
      position: relative;
      .success_shu{
        position: absolute;
    top: -28px;
    left: 26px;
    z-index: 1;
    height: 152px;
    width: 4px;
      }
    }
    .sc_tg_parent{
        background: #ecf0f5;
        position: relative;
        z-index: 3;
        border-radius: 50%;
        .sc_tg {
      display: inline-block;
      border: 1px solid #0c7ff2;
      height: 16px;
      border-radius: 50%;
      margin: 10px;
      span {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #0c7ff2;
        margin: 2px;
      }
    }
    }
    .sc_tg_parent2{
        background: #ecf0f5;
        position: relative;
        z-index: 3;
        border-radius: 50%;
        padding: 10px;
        width: 20px;
        height: 20px;
          span{
            width: 18px;
            height: 18px;
            display: inline-block;
            border-radius: 50%;
            background: #fff;
            border: 1px solid #ecf0f5;;
          }
    }
    .sc_zt {
      background: #ff6332;
      border-radius: 2px 2px 2px 2px;
      font-size: 12px;
      color: #ffffff;
      line-height: 14px;
      padding: 3px 4px;
      margin-left: 16px;
    }
    .sc_tgs {
      background: #11ad29;
      border-radius: 2px 2px 2px 2px;
      font-size: 12px;
      color: #ffffff;
      line-height: 14px;
      padding: 3px 4px;
      margin-left: 16px;
    }
  }
}
@media only screen and (min-width: 1600px) and (max-width:3000px) {
  .white {
    background: #fff;
   min-width: 295px;
   width: 295px;
    height: calc(100vh - 105px);
    border-radius: 4px;
    min-height: 670px;
    padding: 10px;
    .left_nb_body {
      background: linear-gradient(231deg, #dbe4f5 0%, #fbfcfe 100%);
      border-radius: 4px;
      height: calc(100% - 50px);
      padding: 25px 20px;
      position: relative;
    }
    .title {
      @include flex(row, center, flex-start);
      font-size: 16px;
      font-weight: 600;
      color: #4f5862;
      line-height: 19px;
      margin-bottom: 15px;
      .svg-icon {
        font-size: 20px;
        padding: 7px;
        background: #0c7ff2;
        border-radius: 6px 6px 6px 6px;
        display: inline-block;
        margin-right: 10px;
        color: #fff;
      }
    }
    .content {
      font-size: 13px;
      color: #4f5862;
      line-height: 24px;
      margin-bottom: 20px;
    }
    .btm_img {
      display: inline-block;
      width: 126px;
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 1;
    }
    .left_tp1 {
      padding: 14px 0 19px 15px;
      background: rgba(255, 255, 255, 0.79);
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #cee5fc;
      position: relative;
     z-index: 3;
      h6 {
        font-size: 12px;
        color: #7e8790;
        line-height: 20px;
        margin-bottom: 10px;
      }
      .tp1_content {
        @include flex(row, center, flex-start);
        .svg-icon2 {
          font-size: 22px;
          display: inline-block;
          margin-right: 9px;
        }
        h4 {
          font-size: 14px;
          font-weight: 600;
          color: #4f5862;
          line-height: 16px;
          margin-bottom: 5px;
        }
        span {
          font-size: 12px;
          color: #7e8790;
          line-height: 14px;
        }
      }
    }
    .success {
      @include flex(row, center, flex-start);
      padding: 30px 9px;
      font-size: 14px;
      font-weight: 600;
      color: #4f5862;
      line-height: 16px;
      position: relative;
      .success_shu{
        position: absolute;
    top: -28px;
    left: 26px;
    z-index: 1;
    height: 152px;
    width: 4px;
      }
    }
    .sc_tg_parent{
        background: #ecf0f5;
        position: relative;
        z-index: 3;
        border-radius: 50%;
        .sc_tg {
      display: inline-block;
      border: 1px solid #0c7ff2;
      height: 16px;
      border-radius: 50%;
      margin: 10px;
      span {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #0c7ff2;
        margin: 2px;
      }
    }
    }
    .sc_tg_parent2{
        background: #ecf0f5;
        position: relative;
        z-index: 3;
        border-radius: 50%;
        padding: 10px;
        width: 20px;
        height: 20px;
          span{
            width: 18px;
            height: 18px;
            display: inline-block;
            border-radius: 50%;
            background: #fff;
            border: 1px solid #ecf0f5;;
          }
    }

    .sc_zt {
      background: #ff6332;
      border-radius: 2px 2px 2px 2px;
      font-size: 12px;
      color: #ffffff;
      line-height: 14px;
      padding: 3px 4px;
      margin-left: 16px;
    }
    .sc_tgs {
      background: #11ad29;
      border-radius: 2px 2px 2px 2px;
      font-size: 12px;
      color: #ffffff;
      line-height: 14px;
      padding: 3px 4px;
      margin-left: 16px;
    }
  }
}
</style>